<!--  -->
<template>
  <div class="category-brand">
    <!-- 分类 -->
    <div class="category">
      <ul>
        <li v-for="categoryData in categoryDatas" :key="categoryData.cat_id">
          <img :src="categoryData.touch_icon" alt="" />
          <div class="name">{{ categoryData.cat_name }}</div>
        </li>
      </ul>
    </div>
    <!-- 品牌 -->
    <div class="brand">
      <div class="title">品牌精选</div>
      <div class="brand-list">
        <ul>
          <li v-for="brandData in brandDatas" :key="brandData.brand_id">
            <img :src="brandData.brand_logo" alt="" />
            <div class="name">{{ brandData.brand_name }}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      // 分类数据
      categoryDatas: [
        {
          cat_id: 1129,
          cat_name: "厨房电器",
          touch_icon:
            "https://x.dscmall.cn/storage/data/touch_icon/15985734207245.jpg",
        },
        {
          cat_id: 1105,
          cat_name: "大家电",
          touch_icon:
            "https://x.dscmall.cn/storage/data/touch_icon/15985734159068.jpg",
        },
        {
          cat_id: 1145,
          cat_name: "个护健康",
          touch_icon:
            "https://x.dscmall.cn/storage/data/touch_icon/15985734026258.jpg",
        },
        {
          cat_id: 1160,
          cat_name: "五金家装",
          touch_icon:
            "https://x.dscmall.cn/storage/data/touch_icon/15985733968835.jpg",
        },
        {
          cat_id: 1115,
          cat_name: "生活电器",
          touch_icon:
            "https://x.dscmall.cn/storage/data/touch_icon/15985733825468.jpg",
        },
      ],
      // 品牌的数据
      brandDatas: [
        {
          brand_id: 72,
          brand_name: "ELLE HOME",
          brand_logo:
            "https://x.dscmall.cn/storage/data/brandlogo/1490072313895957648.jpg",
        },
        {
          brand_id: 73,
          brand_name: "她他/tata",
          brand_logo:
            "https://x.dscmall.cn/storage/data/brandlogo/1490072329183966195.jpg",
        },
        {
          brand_id: 77,
          brand_name: "阿迪达斯",
          brand_logo:
            "https://x.dscmall.cn/storage/data/brandlogo/1490072384627679069.jpg",
        },
        {
          brand_id: 78,
          brand_name: "猫人",
          brand_logo:
            "https://x.dscmall.cn/storage/data/brandlogo/1490072399542595828.jpg",
        },
        {
          brand_id: 80,
          brand_name: "Dior",
          brand_logo:
            "https://x.dscmall.cn/storage/data/brandlogo/1490072417755830176.jpg",
        },
        {
          brand_id: 84,
          brand_name: "同仁堂",
          brand_logo:
            "https://x.dscmall.cn/storage/data/brandlogo/1490072746651935979.jpg",
        },
        {
          brand_id: 85,
          brand_name: "喜瑞",
          brand_logo:
            "https://x.dscmall.cn/storage/data/brandlogo/1490072756032175204.jpg",
        },
        {
          brand_id: 87,
          brand_name: "汤臣倍健",
          brand_logo:
            "https://x.dscmall.cn/storage/data/brandlogo/1490072777790374054.jpg",
        },
        {
          brand_id: 88,
          brand_name: "养生堂",
          brand_logo:
            "https://x.dscmall.cn/storage/data/brandlogo/1490072787223453617.jpg",
        },
        {
          brand_id: 89,
          brand_name: "健安喜",
          brand_logo:
            "https://x.dscmall.cn/storage/data/brandlogo/1490072804442637685.jpg",
        },
        {
          brand_id: 90,
          brand_name: "北大荒",
          brand_logo:
            "https://x.dscmall.cn/storage/data/brandlogo/1490072813729175306.jpg",
        },
        {
          brand_id: 91,
          brand_name: "金奥力",
          brand_logo:
            "https://x.dscmall.cn/storage/data/brandlogo/1490072823106532144.jpg",
        },
      ],
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，激活
  deactivated() {}, //如果页面有keep-alive缓存功能，非激活
};
</script>
<style lang="less">
.category-brand {
  width: calc(100% - 2rem);
  margin: 1rem auto;
  //   分类
  .category {
    height: 10rem;
    padding: 1rem;
    background-color: #fff;
    border-radius: 1rem;
    ul {
      display: flex;
      align-items: center;
      margin-top: 1rem;
      li {
        flex: 1;
        text-align: center;
        padding-top: 0.5rem;
        img {
          width: 5.4rem;
          height: 5.4rem;
        }
        .name {
          font-size: 1.2rem;
          margin-top: 0.5rem;
        }
      }
    }
  }
  //   品牌
  .brand {
    background-color: #fff;
    border-radius: 1rem;
    margin: 1rem 0;
    .title {
      font-size: 1.5rem;
      color: #000;
      padding: 2rem 2rem 1rem;
    }
    .brand-list {
      ul {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 1rem 0;
        li {
          width: 25%;
          text-align: center;
          margin: 1rem 0;
          img {
            width: 7.1rem;
            height: 3.1rem;
          }
          .name {
            font-size: 1.2rem;
            margin-top: 0.5rem;
          }
        }
      }
    }
  }
}
</style>